<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
<script>
    /**
     * 异步加载图片资源
     *
     * 该函数创建一个Image对象并设置加载事件处理，返回一个Promise对象。
     * 当图片加载成功时解析为Image对象，加载失败时拒绝并返回错误信息。
     *
     * @param {string} url - 要加载的图片资源路径
     * @returns {Promise<Image>} 图片加载成功的Promise对象
     * @rejects {Error} 图片加载失败时拒绝，携带错误信息
     */
    function loadImage(url){
        return new Promise((resolve,reject)=>{
            // 创建Image对象并设置加载事件处理
            const img = new Image()

            // 图片加载成功处理：将Image对象传递给resolve
            img.onload = () => {
                resolve(img)
            }

            // 图片加载失败处理：创建错误对象传递给reject
            img.onerror = () => {
                reject(new Error('Could not load image at' + url))
            }

            // 设置图片源路径（注意：此处应为img.src属性赋值）
            img.url = url
        })
    }

</script>
</html>